<template>
	<div :class="curClassName" :style="curStyle">
		<div class="app-login-third__title">
			{{ $t('common.login.other', '其他') }}
		</div>
		<div class="app-login-third__content">
			<div class="app-login-third__btn" @click="handleThirdLogin('DINGDING')">
				<img class="third-svg-container" src="/assets/img/dingding.svg" />
			</div>
			<div class="app-login-third__btn" @click="handleThirdLogin('WXWORK')">
				<img class="third-svg-container" src="/assets/img/qiyeweixin.svg" />
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
import { ThirdLoginProps } from './login-third';

const props = defineProps(ThirdLoginProps);

/**
 * 项名称
 *
 * @memberof AppThirdLogin
 */
const itemName = computed(() => {
	return props.index || props.index === 0
		? `${props.name}_${props.index}`
		: props.name;
});

/**
 * 当前容器样式
 *
 * @memberof AppThirdLogin
 */
const curStyle = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return layoutModel.getElementStyle();
	}
});

/**
 * 类名
 *
 * @memberof AppThirdLogin
 */
const curClassName = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return `app-login-third ${itemName.value} ${layoutModel.sysCss || ''}`;
	}
});

/**
 * 钉钉登录
 *
 * @memberof AppThirdLogin
 */
const dingTalkHandleClick = async () => {
	App.getNotificationHelper().info(
		App.ts('layoutelement.loginthird.notsupportding', '暂未支持钉钉登录')
	);
};

/**
 * 微信登录
 *
 * @memberof AppThirdLogin
 */
const wxWorkHandleClick = async () => {
	App.getNotificationHelper().warning(
		App.ts('layoutelement.loginthird.notsupportwxwork', '暂未支持微信登录')
	);
};

/**
 * 处理第三方登录
 *
 * @param type 登录类型
 * @memberof AppThirdLogin
 */
const handleThirdLogin = (type: string) => {
	switch (type) {
		case 'DINGDING':
			dingTalkHandleClick();
			break;
		case 'WXWORK':
			wxWorkHandleClick();
			break;
		default:
			console.warn(`暂不支持${type}登录`);
			break;
	}
};
</script>
